<template>
	<view>
		<view style="padding-bottom: 100upx;">
    <view class="flex-row bg-white mb-20 goods-info">
        <view class="flex-grow-0">
            <image mode="aspectFill" :src="data.goods.goods_pic" style="width: 156upx;height: 156upx;margin-right:20upx "></image>
        </view>
        <view class="flex-grow-1 flex-col">
            <view class="flex-grow-1">{{data.goods.name}}</view>
            <view class="flex-grow-0 flex-row" style="font-size: 9pt">
                <view class="flex-grow-1">
                    <view style="margin-right: 40upx;display: inline-block" v-for="(item,index) in data.goods.attr" :key="item.id">
                        {{item.attr_group_name}}:{{item.attr_name}}
                    </view>
                </view>
                <view class="flex-grow-0">×{{data.goods.num}}</view>
            </view>
        </view>
    </view>
    <view class="flex-row bg-white switch-tab mb-20">
        <view @tap="$emit('switchTab',$event)" class="flex-grow-1 flex-x-center" data-id="1">
            <text :class="['flex-y-center', data.switch_tab_1]">退货退款</text>
        </view>
        <view @tap="$emit('switchTab',$event)" class="flex-grow-1 flex-x-center" data-id="2">
            <text :class="['flex-y-center', data.switch_tab_2]">换货</text>
        </view>
    </view>
    <view :class="['switch-body', data.switch_tab_1]">
        <view class="flex-row bg-white form-row mb-20">
            <view class="flex-grow-0">
                <text class="form-label">退款原因</text>
            </view>
            <view class="flex-grow-1">
                <textarea @input="$emit('descInput',$event)" data-type="1" placeholder="请输入退款原因" rows="2" style="width: 100%;padding: 0;"></textarea>
            </view>
        </view>
        <view class="flex-row bg-white form-row mb-20">
            <view class="flex-grow-0">
                <text class="form-label">退款金额</text>
            </view>
            <view class="flex-grow-1">
                <text class="refund-price">￥{{data.goods.max_refund_price}}</text>
            </view>
        </view>
        <view class="bg-white form-row mb-20">
            <view class="mb-20">
                <text class="form-label">上传凭证</text>
            </view>
            <view class="image-list">
                <view class="image-preview" :data-index="index" v-for="(item,index) in data.refund_data_1.pic_list" :key="item.id">
                    <text @tap="$emit('deleteImage',$event)" class="flex-x-center flex-y-center image-del" :data-index="index" data-type="1">×
                    </text>
                    <image mode="aspectFill" :src="item" style="width: 160upx;height: 160upx"></image>
                </view>
                <view @tap="$emit('chooseImage',$event)" class="image-picker" data-type="1" v-if="!data.refund_data_1.pic_list||data.refund_data_1.pic_list.length<6">
                    <image :src="data.__wxapp_img.dapp.image_picker.url" style="width: 160upx;height: 160upx"></image>
                </view>
            </view>
        </view>
    </view>
    <view :class="['switch-body', data.switch_tab_2]">
        <view class="flex-row bg-white form-row mb-20">
            <view class="flex-grow-0">
                <text class="form-label">换货说明</text>
            </view>
            <view class="flex-grow-1">
                <textarea @input="$emit('descInput',$event)" data-type="2" placeholder="请输入换货说明" rows="2" style="width: 100%;padding: 0;"></textarea>
            </view>
        </view>
        <view class="bg-white form-row mb-20">
            <view class="mb-20">
                <text class="form-label">上传凭证</text>
            </view>
            <view class="image-list">
                <view class="image-preview" :data-index="index" v-for="(item,index) in data.refund_data_2.pic_list" :key="item.id">
                    <text @tap="$emit('deleteImage',$event)" class="flex-x-center flex-y-center image-del" :data-index="index" data-type="2">×
                    </text>
                    <image mode="aspectFill" :src="item" style="width: 160upx;height: 160upx"></image>
                </view>
                <view @tap="$emit('chooseImage',$event)" class="image-picker" data-type="2" v-if="!data.refund_data_2.pic_list||data.refund_data_2.pic_list.length<6">
                    <image :src="data.__wxapp_img.dapp.image_picker.url" style="width: 160upx;height: 160upx"></image>
                </view>
            </view>
        </view>
    </view>
</view>
<form @submit="$emit('refundSubmit',$event)" data-type="1" reportSubmit="true" v-if="data.switch_tab_1">
    <button class="submit-btn" formType="submit">
        <text>提交</text>
    </button>
</form>
<form @submit="$emit('refundSubmit',$event)" data-type="2" reportSubmit="true" v-if="data.switch_tab_2">
    <button class="submit-btn" formType="submit">
        <text>提交</text>
    </button>
</form>

	</view>
</template>

<script>var myVue = {};
	export default {
		props:['data'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.goods-info {
    padding: 30upx 24upx;
    border-top: 1upx solid #e3e3e3;
}

.switch-tab {
    border-bottom: 1upx solid #e3e3e3;
}

.switch-tab text {
    height: 100upx;
    border-bottom: 5upx solid transparent;
}

.switch-tab text.active {
    border-bottom-color: #ff4544;
    color: #ff4544;
}

.switch-body {
    display: none;
}

.switch-body.active {
    display: block;
}

.form-row {
    padding: 28upx 24upx;
}

.form-row .form-label {
    white-space: nowrap;
    margin-right: 32upx;
}

.form-row textarea {
    height: 120upx;
}

.refund-price {
    color: #ff4544;
}

.image-list {
    margin-left: -20upx;
    margin-top: -20upx;
}

.image-picker {
    font-size: 0;
}

.image-picker,.image-preview {
    display: inline-block;
    margin-left: 20upx;
    margin-top: 20upx;
}

.image-preview {
    position: relative;
}

.image-preview .image-del {
    position: absolute;
    top: -15upx;
    right: -15upx;
    height: 50upx;
    width: 50upx;
    background: #ff4544;
    color: #fff;
    font-weight: bolder;
    border-radius: 999upx;
    font-size: 9pt;
    box-shadow: 0 1upx 2upx rgba(0,0,0,.2);
}

.submit-btn {
    height: 100upx;
    line-height: 100upx;
    background: #ff4544;
    color: #fff;
    width: 100%;
    position: fixed;
    bottom: var(--window-bottom);
}

.active {
    visibility: visible;
}
</style>
